<!doctype html>
<html>
<head>
<style>
	#sta{ 
		perspective: 1024px; 
		width: 128px;
		height: 128px;
	}
	#can{ transform-style: preserve-3d; position: absolute; left: 20px; top: 20px; }
	img { position: absolute; perspective-origin: 50% 50%; border: 2px solid red; width: 128px; height: 128px; }
	#i1 { transform: rotateY(  180deg ) translateZ(64px); }
	#i2 { transform: rotateY(    0deg ) translateZ(64px); }
	#i3 { transform: rotateY(  270deg ) translateZ(64px); }
	#i4 { transform: rotateY(   90deg ) translateZ(64px); }
</style>
<script src="jquery-2.2.0.min.js"></script>
<script>
$(function(){
    var hovercnt = 0, isHover = false, init = [ 180, 0, 270, 90 ];
    
    var rotateString = function(deg) {
    
        if(deg >= 360) deg = deg % 360;
        
        return 'rotateY(' + deg + 'deg) translateZ(64px)'
    }
    
    var time = setInterval(function() {
        
        if(!isHover) return;
        
        for(var i = 1; i <= init.length; ++i) {
        
            $('#i' + i).css({ 'transform': rotateString(init[i - 1] + hovercnt * 2)});
        }
        
        hovercnt += 1;
        
    }, 33);
   
	$("#sta").mouseenter(function(){
    
        isHover = true;
	});
	$("#sta").mouseleave(function(){
        
        isHover = false;
	});
});
</script>
</head>
<body>
	<div id="sta">
	<div id="can">
		<img id="i1" class="in" src="h (1).jpg" />
		<img id="i2" class="out" src="h (2).jpg" />
		<img id="i3" class="in2" src="h (3).jpg" />
		<img id="i4" class="out2" src="h (4).jpg" />        
	</div>
	</div>
</body>
</html>